<template>
    <van-nav-bar title="首页" placeholder fixed />
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
            <div @click="onSearch">搜索</div>
        </template>
    </van-search>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image.img" class="swipe-item" />
        </van-swipe-item>
    </van-swipe>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        :immediate-check="false">
        <van-row :gutter="[20, 20]" class="list">
            <van-col span="12" v-for="(item) in listArr" :key="item.proid" @click="onDetail(item.proid)">
                <van-card :price="item.originprice" :desc="item.desc" :title="item.proname" :thumb="item.img1" />
            </van-col>
        </van-row>
    </van-list>

    <van-tabbar v-model="active" route placeholder fixed>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { bannerListReq, proListReq } from '@/api/home';
import { cartArr } from '@/store/cart';
import { Loading } from 'vant';
// import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
let active = ref(0);
let router = useRouter();
let value = ref('');
let images = ref([]);
let listArr = ref([]);
// 搜索功能的传值
function onSearch() {
    console.log(value.value);
    router.push("/search?keyword=" + value.value);
}
// 轮播图
// axios.get('http://localhost:3001/api/banner/list')
bannerListReq().then((r) => {
    // console.log(r.data);
    images.value = r.data.data;
    // console.log(images.value);
})
// 商品列表渲染
let count = 1;
let limitNum = 15;
async function loadList() {
    // let productListAPI = "http://localhost:3001/api/pro/list";

    // let r = await axios.get(productListAPI, { count: count, limitNum: limitNum });
    proListReq(count, limitNum).then((r) => {
        console.log(r.data);
        listArr.value = r.data.data;
    })

}
loadList();
// 点击跳转详情页面
function onDetail(id) {
    // console.log(id);
    router.push('/detail?proid=' + id);
}
// 滚动到底部就会触发
const loading = ref(false);
const finished = ref(false);
const onLoad = async () => {
    count++;//页码加加
    console.log("滚动到底部就会触发");
    proListReq(count, limitNum).then((r) => {
        listArr.value.push(...r.data.data);
        loading.value = false;
        if (r.data.data.length < limitNum) {
            finished.value = true;
        }
    })
}
</script>

<style scoped>
.swipe-item {
    width: 100%;
}
</style>